<template>
  <el-button @click="confirm">多层弹窗按钮</el-button>

  <el-dialog
    v-model="state.dialogVisible"
    :title="currentItem?.name"
    width="500"
  >
    <div>{{ currentItem?.description }}</div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button
          v-if="currentItem.name !== '待定'"
          type="primary"
          @click="nextStep"
        >
          下一步
        </el-button>
        <el-button v-else type="primary" @click="nextStep">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, computed } from 'vue'

const state = reactive({
  dialogVisible: false,
  currentIndex: 0,
})

// 弹窗文案
const insuranceList = [
  {
    key: 'liability',
    name: '政保责任险',
    description: '政保责任险是指政府为保障公共利益而设立的保险产品...',
  },
  {
    key: 'agriculture',
    name: '政保农险',
    description: '政保农险是指政府为支持农业发展而设立的保险产品...',
  },
  {
    key: 'oversized',
    name: '超大客群',
    description: '超大客群是指政府为满足特定人群的需求而设立的保险产品...',
  },
  {
    key: 'undetermined',
    name: '待定',
    description: '哈哈哈',
  },
]

// 当前项
const currentItem = computed(() => {
  return insuranceList[state.currentIndex] || { name: '', description: '' }
})

// 开始确认流程
function confirm() {
  state.currentIndex = 0
  state.dialogVisible = true
}

// 下一步
function nextStep() {
  if (state.currentIndex < insuranceList.length - 1) {
    state.currentIndex++
  } else {
    state.dialogVisible = false
    console.log('😊全部确认完成')
  }
}

// 用户取消
function cancel() {
  state.dialogVisible = false
  console.log('用户取消于第 ' + (state.currentIndex + 1) + ' 层')
}
</script>
